<template>
	<view :style="{ opacity: btnOpacity ? 0.2 : 1 }">
		<view class="progressBox">
			<view style="font-size: 20rpx;color: white;">{{ currentTimeShow }}</view>
			<slider
				class="isSlider"
				activeColor="#FFFFFF"
				backgroundColor="#e9e9e925"
				@changing.stop="isChangingFunc"
				@change.stop="isChangeFunc"
				:max="durationSlider"
				:value="currentTimeSlider"
				block-size="12"
			></slider>
			<view style="font-size: 20rpx;color: white;">{{ durationShow }}</view>
		</view>
		<view class="newPlay" @click.stop="playBtnClick">
			<image
				v-if="!isPlayNow"
				style="width:150rpx;height:150rpx;"
				src="https://res.qiguoread.com/staticResources/fellow_townsman/image/video_play2.png"
				class="icon-play"
			></image>
			<image wx:else style="width:150rpx;height:150rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/video_pause2.png" class="icon-pause"></image>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		isPlayNow: {
			type: Boolean,
			default: true
		},
		currentTime: {
			type: Number,
			default: 0
		},
		duration: {
			type: Number,
			default: 0
		},
		isHideBars: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			isChanging: false,
			nowWidth: 0,
			durationSlider: 60,
			currentTimeSlider: 0,
			currentTimeShow: '00:00',
			durationShow: '00:00',
			btnOpacity: false
		};
	},
	watch: {
		isHideBars(newVal){
			if(newVal) this.controslTm();
		},
		/* val监听改变的值*/
		currentTime(newVal) {
			if (!this.isChanging && newVal && newVal > 0) {
				let nowWidth = 0;
				if (this.duration) {
					nowWidth = (Math.round(newVal * 4) / parseInt(this.duration * 4)) * 100;
				}
				this.currentTimeShow = this.formatDuring(newVal);
				this.currentTimeSlider = newVal * 4;
				this.nowWidth = nowWidth;
				this.durationShow = this.formatDuring(this.duration);
				this.durationSlider = parseInt(this.duration * 4);
			}
		}
	},
	mounted() {
		this.controslTm();
	},
	methods: {
		controslBtm() {
			clearTimeout(this.controTimer);
			this.btnOpacity = false;
		},
		//设置为透明
		controslTm() {
			this.btnOpacity = false;
			clearTimeout(this.controTimer);
			this.controTimer = setTimeout(() => {
				this.btnOpacity = true;
			}, 3000);
		},
		playBtnClick() {
			this.controslTm();
			if (this.isPlayNow) {
				// this.$emit('isPause');
				this.$emit('isPause','handPause');
			} else {
				this.$emit('playNow');
			}
		},
		isChangeFunc(e) {
			console.log('isChangeFunc', e);
			let nowWidth = 0;
			let nowTime = e.detail.value;
			if (this.duration) {
				nowWidth = (Math.round(nowTime) / parseInt(this.duration * 4)) * 100;
			}
			this.isChanging = false;
			this.nowWidth = nowWidth;
			this.controslTm();
			this.$emit('sliderEnd', e.detail.value / 4);
		},
		isChangingFunc(e) {
			this.controslBtm();
			if (!this.isChanging) {
				this.isChanging = true;
				this.$emit('isChangingFunc', true);
			}
			let nowTime = e.detail.value;
			let nowWidth = 0;
			if (this.duration) {
				nowWidth = (Math.round(nowTime) / parseInt(this.duration * 4)) * 100;
			}
			this.nowWidth = nowWidth;
			this.currentTimeShow = this.formatDuring(Math.round(e.detail.value / 4));
		},
		// 数字 todouble
		toDou: function(n) {
			n = n.toString();
			return n[1] ? n : '0' + n;
		},
		formatDuring(n) {
			var min = Math.floor(n / 60);
			var sec = parseInt(n % 60);
			return [min, sec].map(this.toDou).join(':');
		}
	},
	created() {}
};
</script>

<style lang="scss">
/* components/zwyVideoProgress/zwyVideoProgress.wxss */
.progressBox {
	position: fixed;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: calc(env(safe-area-inset-bottom) + 62px);
	width: 100vw;
	height: 18px;
	z-index: 100;
}
.isSlider {
	transition: 0.3s;
	width: 75vw;
	opacity: 1;
	margin: auto 20rpx;
	position: relative;
	z-index: 10;
}
.isShow {
	opacity: 1;
	display: inline-block;
}
.isHide {
	opacity: 0;
	display: none;
}
.timesBox {
	transition: 0.3s;
	position: absolute;
	top: -160rpx;
	left: 0;
	right: 0;
	text-align: center;
	color: white;
	font-size: 34rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.customSlider::before {
	position: absolute;
	content: '';
	left: 0;
	z-index: 5;
	right: 0;
	height: var(--height);
	width: 100vw;
	top: 0;
	bottom: 0;
	margin: auto;
	background: rgba(255, 255, 255, 0.1);
}
.customSlider {
	width: 20vw;
	--height: 2rpx;
	--circleHeight: 8rpx !important;
	height: var(--height);
	z-index: 8;
	background: rgba(255, 255, 255, 0.15);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	--circleBg: rgba(255, 255, 255, 0.25);
}
.customSlider::after {
	position: absolute;
	content: '';
	right: -6rpx;
	width: var(--circleHeight);
	height: var(--circleHeight);
	z-index: 11;
	margin: auto;
	top: 0;
	bottom: 0;
	background: var(--circleBg);
	border-radius: 50%;
}
.isChanging {
	--circleHeight: 12rpx !important;
	--height: 8rpx !important;
	background: rgba(255, 255, 255, 1) !important;
	--circleBg: rgba(255, 255, 255, 1) !important;
}
</style>
